<template>
    <div class="comment-reply-container">
        <!-- 头部信息部分 -->
        <van-nav-bar
            :title="`${comment.reply_count}条回复`"
        >
            <van-icon slot="left" name="cross" @click="$emit('close')" />
        </van-nav-bar>
        <!-- 头部信息部分 -->
        <!-- 当前的评论 -->
        <comment-item :comment="comment"  />
        <!-- 当前的评论 -->
        <!-- 全部的评论列表 -->
        <comment-list :source="comment.com_id" :commentLists="commentLists" type="c"  />
        <!-- 全部的评论列表 -->
         <!-- 底部区域 -->
        <div class="article-bottom">
            <van-button type="default" round size="small" class="comment-btn" @click=" isShowMoreCommentPopup = true ">写评论</van-button>
        </div>
        <!-- 底部区域 -->

        <!-- 二级或者多级评论回复遮罩层 -->
        <van-popup 
            v-model="isShowMoreCommentPopup" 
            position="bottom"
        > 
            <comment-post :target="comment.com_id" :article-id="articleId" @post="onPost"  />
        </van-popup>
        <!-- 二级或者多级评论回复遮罩层 -->
    </div>
</template>

<script>
import commentItem from './comment-item'
import commentList from './comment-list'
import commentPost from './comment-post'
    export default {
        name: 'commentReply',
        props:{
            comment:{
                type: Object,
                required: true
            },
            articleId:{
                type: [String, Number, Object],
                required: true
            }
        },
        components:{
            commentItem,
            commentList,
            commentPost
        },
        data() {
            return {
                isShowMoreCommentPopup: false, //回复二级或者多级评论是否显示
                commentLists: [] //这是传递给commentList 的一个数组
            }
        },
        methods: {
            onPost(comment){
                // 将发布成功的数据放到评论列表的顶部
                this.commentLists.unshift(comment)
                // 更新评论回复的数量
                this.comment.rely_count++
                // 关闭回复的弹层
                this.isShowMoreCommentPopup = false
            }
        },
    }
</script>

<style lang="less" scoped>
.article-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .comment-btn{
        width: 200px;
        height: 35px;
    }
}
</style>